<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>支出</title>
<link rel="stylesheet" href="static/css/base.css" media="all">
</head>
<body>
	<form>
		<div class="layui-form">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label style="float: left; padding: 9px 15px;">支出类型</label>
					<div class="layui-input-inline">
						<select id="type" lay-verify="required">
							<option value=""></option>
							<option value="生活支出">生活支出</option>
							<option value="礼金支出">礼金支出</option>
							<option value="其它支出">其它支出</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label style="float: left; padding: 9px 15px;">月份：</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="month"
							placeholder="请选择年月">
					</div>
				</div>
				<button class="layui-btn bt_search" data-type="reload">搜索</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<div style="height: 10px;" ></div>
	<button class="layui-btn bt_add">新增</button>

	<table id="demo" lay-filter="test"></table>
	<script type="text/javascript">
		layui.use(['laypage', 'table', 'jquery', 'form', 'laydate'], function(){
			var table = layui.table;
			var laypage = layui.laypage;
			var form = layui.form;
			form.render();
			var $ = layui.$;
			var laydate = layui.laydate;
			
			table.render({
				elem : '#demo',
				url: 'expenditure/expenditureList',
				page: true
				,totalRow: true
				,cols : [[
					{field: 'id', title: 'ID', unresize: true, totalRowText: '合计：'}
					,{field: 'username', title: '用户'}
					,{field: 'create_date', title: '时间', sort: true}
					,{field: 'money', title: '金额(￥)', totalRow: true} 
					,{field: 'type', title: '类型'}
					,{field: 'remark', title: '备注', sort: true}
				]]
			});

			laydate.render({
				elem : '#month'
				,range: true
			});
			
			
			//触发搜索条件事件
			$('.bt_search').on('click', function (e){
				table.reload($('table').attr("id"), {
					where : {
						type : $('#type').val(),
						month : $('#month').val()
					}
				});
				return false;
			})
			
			//新增
			$('.bt_add').on('click', function() {
				layer.open({
					type : 2,
					title : '新增',
					shadeClose : true,
					area : ['893px', '550px'],
					content : 'expenditure_add.jsp'
				});
			})
		})
	</script>
</body>
</html>